<template>
    <main>
      <p class="tj">全部推荐</p>
      <div class="jian">
        <five/>
      </div>
      <div class="cai">
        <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
  <van-dropdown-item v-model="value2" :options="option3" />
  <van-dropdown-item v-model="value2" :options="option4" />
</van-dropdown-menu>
      </div>
      </main>
</template>

<script>
import Five from"./five.vue"

export default {
  components:{Five},
data() {
    return {
       value1: 0,
      value2: 'a',
      option1: [
        { text: '全部类型', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '全部区域', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
       option3: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
       option4: [
        { text: '筛选兼职', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ], 
    }
},
}
</script>

<style>
main{
  background: #fff;
  border-radius: 30px;
}
main .tj{
font-size: 38px;
font-weight: bold;
margin-left: 38px;
}
main .tj:after{
  position:absolute;
  width: 158px;
  content: '';
  top: 226px;
  left:40px ;
  border-bottom:20px solid #FBC805;
  border-radius: 20px;
  opacity:.8;
}

.jian{
  margin-top:30px;
}
.jian p{
  font-size: 22px;
}
.cai{
  margin-top: 20px;
}
.van-dropdown-menu__bar {
  height: 60px;
  font-size: 26px;
}
.van-dropdown-menu__title{
  line-height: 2.375rem;
}
.van-dropdown-menu__title::after{
  top:0.7rem;
  right:-10px;
  border: 0.3875rem solid;
  border-color: transparent transparent black black;
}
.van-dropdown-menu__title--active::after {
    border-color: transparent transparent currentColor currentColor;
}
.van-dropdown-menu__bar {
  box-shadow: none;
}
</style>